<template>
  <div id="app">
    <el-form :inline="true" :model="queryForm" class="demo-form-inline" ref="search">
      <el-form-item prop="qname">
        <el-input v-model="queryForm.qname" clearable placeholder="电影名称"></el-input>
      </el-form-item>
      <el-form-item prop="qdirector">
        <el-input v-model="queryForm.qdirector" clearable placeholder="电影导演"></el-input>
      </el-form-item>
      <el-form-item prop="qcheckStatus">
        <el-select v-model="queryForm.qcheckStatus" placeholder="审核状态" clearable>
          <el-option label="未审核" value="未审核"></el-option>
          <el-option label="已审核" value="已审核"></el-option>
          <el-option label="已驳回" value="已驳回"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="list">查询</el-button>
        <el-button type="primary" @click="addMovies">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table
        :data="tableData"
        @selection-change="handleSelectionChange"
        ref="multipleTable"
        stripe
        style="width: 100%">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="mid"
          sortable
          label="编号"
          width="180">
      </el-table-column>
      <el-table-column
          prop="mname"
          label="电影名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="director"
          label="导演">
      </el-table-column>
      <el-table-column
          prop="releaseDate"
          label="上映日期">
      </el-table-column>
      <el-table-column
          prop="endDate"
          label="下映日期">
      </el-table-column>
      <el-table-column
          prop="checkStatus"
          label="审核状态">
      </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button
              v-if="scope.row.checkStatus=='未审核'"
              size="mini"
              type="warning"
              @click="handleCheck('已审核', scope.row)">审核
          </el-button>
          <el-button
              v-if="scope.row.checkStatus=='未审核'"
              size="mini"
              type="warning"
              @click="handleCheck('已驳回', scope.row)">驳回
          </el-button>
          <el-button
              size="mini"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryForm.pageNum"
          :page-sizes="[1, 3, 5, 10]"
          :page-size="queryForm.pageSize"
          :page-count="pages"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
    <!--    添加-->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="电影名称" prop="mname" :label-width="formLabelWidth">
          <el-input v-model="form.mname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="导演" prop="director" :label-width="formLabelWidth">
          <el-input v-model="form.director" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上映日期" prop="releaseDate" :label-width="formLabelWidth">
          <div class="block">
            <el-date-picker
                v-model="form.releaseDate"
                align="right"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="下映日期" prop="endDate" :label-width="formLabelWidth">
          <div class="block">
            <el-date-picker
                v-model="form.endDate"
                align="right"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
            </el-date-picker>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--    修改-->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible2">
      <el-form :model="form2" :rules="rules" ref="ruleForm">
        <el-form-item label="电影名称" :label-width="formLabelWidth" prop="mname">
          <el-input v-model="form2.mname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="导演" :label-width="formLabelWidth" prop="director">
          <el-input v-model="form2.director" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上映日期" :label-width="formLabelWidth" prop="releaseDate">
          <div class="block">
            <el-date-picker
                v-model="form2.releaseDate"
                align="right"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="下映日期" :label-width="formLabelWidth" prop="endDate">
          <div class="block">
            <el-date-picker
                v-model="form2.endDate"
                align="right"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
            </el-date-picker>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateMovies">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "Movies",
  data() {
    return {
      rules: {
        mname: [
          {required: true, message: '请输入活动名称', trigger: 'blur'},
          // {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
        director: [
          {required: true, message: '请输入导演名称', trigger: 'blur'}
        ],
        releaseDate: [
          {required: true, message: '请选择日期', trigger: 'blur'}
        ],
        endDate: [
          {required: true, message: '请选择日期', trigger: 'blur'}
        ],
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      formLabelWidth: '120px',
      dialogFormVisible: false,
      dialogFormVisible2: false,
      tableData: [],
      form: {
        mid: 0,
        mname: '',
        director: '',
        releaseDate: '',
        endDate: '',
        checkStatus: '',
      },
      form2: {
        mid: 0,
        mname: '',
        director: '',
        releaseDate: '',
        endDate: '',
        checkStatus: '',
      },
      queryForm: {
        pageNum: 1,
        pageSize: 3,
        qname: '',
        qdirector: '',
        qcheckStatus: '',
      },
      total: 0,
      pages: 2,
    }
  },
  methods: {
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    save(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.form.checkStatus = "未审核";

          this.axios.post("http://localhost:8088/movies/addMovies", this.form).then(res => {
            console.log(res);
            if (res.data.flag) {
              this.$message.success("添加成功！");
              this.dialogFormVisible = false;
              this.list();
            } else {
              this.$message.error("添加失败！");
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
    ,
    updateMovies() {
      this.form2.checkStatus = "未审核";
      this.axios.post("http://localhost:8088/movies/updMovies", this.form2).then(res => {
        console.log(res);
        if (res.data.flag) {
          this.$message.success("修改成功！");
          this.dialogFormVisible2 = false;
          this.list();
        } else {
          this.$message.error(res.data.msgInfo);
        }
      })
    }
    ,
    addMovies() {
      this.dialogFormVisible = true;
    }
    ,
    list() {
      this.axios.get("http://localhost:8088/movies/esList", {params: this.queryForm}).then(res => {
        console.log(res);
        let msgData = res.data.msgData;
        this.tableData = msgData.list;
        this.total = msgData.total;
        this.pages = msgData.pages;
      })
    }
    ,
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
    ,
    handleEdit(index, row) {
      console.log(index, row);

      this.dialogFormVisible2 = true;
      this.form2 = row;
      // this.form2.mid = row.mid;
      // this.form2.mname = row.mname;
      // this.form2.releaseDate = row.releaseDate;
      // this.form2.endDate = row.endDate;
      // this.form2.director = row.director;
    }
    ,
    handleDelete(index, row) {
      console.log(index, row);
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.form.mid = row.mid;
        this.axios.post("http://localhost:8088/movies/delMovies", this.form).then(res => {
          console.log(res);
          if (res.data.flag) {
            this.$message.success("删除成功！");
            this.list();
          } else {
            this.$message.error("删除失败！");
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
    ,
    handleCheck(status, row) {
      this.form = row;
      this.form.checkStatus = status;

      // this.$message.success("操作成功！");
      this.axios.post("http://localhost:8088/movies/changeStatus", this.form).then(res => {
        console.log(res);
        if (res.data.flag) {
          this.$message.success("操作成功！");
          row.checkStatus = status;
          // this.list();
        } else {
          this.$message.error("操作失败！");
        }
      })
    }
    ,
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.queryForm.pageNum = 1;
      this.queryForm.pageSize = val;
      this.list();
    }
    ,
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.queryForm.pageNum = val;
      this.list();
    }
  }
  ,
  created() {
    this.list();
  }
}
</script>

<style scoped>

</style>